<h1 mat-dialog-title> Modify {{memberDetial.name}} Roles</h1>
<div mat-dialog-content>

    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">

        <!--if nodes has no child will run here-->
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
            <button mat-icon-button disabled></button>

            <mat-checkbox class="checklist-leaf-node" [checked]="checklistSelection.isSelected(node)"
                (change)="checklistSelection.toggle(node);">{{node.name}}</mat-checkbox>

        </mat-tree-node>

        <!--if nodes has child will run here-->
        <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
            <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
                <mat-icon class="mat-icon-rtl-mirror">
                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>
            </button>

            <mat-checkbox [checked]="checklistSelection.isSelected(node)"
                (change)="checklistSelection.toggle(node)">{{node.name}}</mat-checkbox>
        </mat-tree-node>

    </mat-tree>

</div>
<div mat-dialog-actions>
    <button mat-raised-button color="primary" (click)="onNoClick()" cdkFocusInitial>Cancel</button>
    <button mat-raised-button color="primary" (click)="onYesClick()">Save</button>
</div>